<template>
	<view>

		<uni-nav-bar v-if="userInfo && userInfo.vip"
			statusBar="true"
			color="#fff"
			backgroundColor="#e8b768"
			left-icon="back"
			@clickLeft="backLastPage"
			title="菜谱搜索">
		</uni-nav-bar>

		<uni-nav-bar v-else
			statusBar="true"
			color="#fff"
			backgroundColor="#ee7b2d"
			left-icon="back"
			@clickLeft="backLastPage"
			title="菜谱搜索">
		</uni-nav-bar>

		<view :class="['header',{'vip-header':userInfo.vip}]">
			<view class="search-container">
				<input type="text"
					:value="searchContent"
					class="search-bar"
					:placeholder="searchTip"
					@input="handleSearchInput" />
				<text @tap="clearInput"
					class="clear-input"
					v-show="searchContent">x</text>
				<text>搜索</text>
			</view>
		</view>

		<template v-if="searchContent">
			<view class="show-search-content">
				<view class="search-content">
					搜索内容：{{searchContent}}
				</view>

				<view class="search-list">
					<view class="search-item"
						v-for="item in searchList"
						:key="item._id"
						:id="item._id"
						@tap="toMenuDetail">
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>

		</template>

		<template v-else>
			<view class="history"
				v-if="historyList.length">
				<view class="title">历史</view>
				<view class="history-item"
					v-for="item in historyList"
					:key="item"
					:data-val="item"
					@tap="enterInput">{{item}}</view>

				<image class="icon-delete"
					src="../../static/img/icon-delete.png"
					@tap="deleteSearchHistory"></image>
			</view>



			<view class="vip-section"
				v-if="userInfo && userInfo.vip">
				<view class="section-title">
					<text>精品名厨视频-会员专享</text>
					<image src="../../static/img/vip/mengbanzu256.png"
						mode=""></image>
				</view>
				<menu-scroll :itemList="vipExclusiveMenu"
					:isVip="true"
					backgroundColor="#f9f9f9"></menu-scroll>
			</view>

			<view class="regular-section">
				<menu-scroll-y :itemList="randomRecommend"></menu-scroll-y>
			</view>

		</template>


	</view>
</template>

<script>
	import backLastPage from '../../mixins/backLastPage.js'

	let isSent = false;
	export default {
		data() {
			return {
				searchTip: '',
				userInfo: null,
				vipExclusiveMenu: [],
				randomRecommend: [],
				searchContent: '',
				searchList: [],
				historyList: []
			}
		},
		mixins: [backLastPage],
		onLoad(options) {
			this.searchTip = options.searchTip;
		},
		onShow() {
			this.userInfo = getApp().globalData.userInfo;
			this.getVipExclusive();
			this.getHistoryList();
		},
		methods: {
			toMenuDetail(e) {
				// console.log(this.isVip);
				uni.navigateTo({
					url: '/pages/menu-detail/menu-detail?id=' + e.currentTarget.id
				})
			},

			getHistoryList() {
				let historyList = uni.getStorageSync('historyList');
				if (historyList) {
					this.historyList = historyList;
				}
			},
			handleSearchInput(e) {
				this.searchContent = e.detail.value.trim();

				if (isSent) {
					return;
				}
				isSent = true;

				this.getSearchList(this.searchContent);

				setTimeout(() => {
					isSent = false;
				}, 1500)

			},

			deleteSearchHistory() {
				uni.showModal({
					title: '删除历史记录',
					content: '确认删除历史记录吗？',
					success:(res)=> {
						if (res.confirm) {
							this.historyList = [];
							uni.removeStorageSync('historyList');
							uni.showToast({
								title:'删除历史成功',
								icon:'success'
							})
						}
					}
				})

			},
			enterInput(e){
				this.searchContent = e.currentTarget.dataset.val;
				this.getSearchList(this.searchContent);
			},
			clearInput() {
				this.searchContent = '';
				this.searchList = [];
			},

			async getSearchList(val) {
				if (!val) {
					this.searchList = [];
					return;
				}
				let { menus } = await this.$api.mSearch.searchMenu(10, 1, val);
				this.searchList = menus;
				if (this.historyList) {
					let index = this.historyList.indexOf(val)
					if (index !== -1) {
						this.historyList.splice(index, 1);
					}
				}

				this.historyList.unshift(val);
				uni.setStorageSync('historyList', this.historyList);
			},
			async getVipExclusive() {
				let { menus } = await this.$api.vipMember.getVipExclusive();
				this.vipExclusiveMenu = menus;

				const newMenus = [...menus];

				const randomRecommend = [];
				for (let i = 0; i < 5; i++) {
					let random = Math.floor(Math.random() * newMenus.length);
					if (randomRecommend.includes(newMenus[random])) {
						continue;
					}
					randomRecommend.push(newMenus[random]);
					newMenus.splice(random, 1);
				}
				this.randomRecommend = randomRecommend;


			},

		}
	}
</script>

<style lang="scss"
	scoped>
	.header {
		position: relative;
		top: -5rpx;
		z-index: 1000;
		width: 750rpx;
		height: 138rpx;
		background-color: #ee7b2d;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;

		&.vip-header {
			background-color: #e8b768;
		}


		.search-container {
			display: flex;
			align-items: center;

			.search-bar {
				width: 540rpx;
				height: 60rpx;
				background-color: #ffffff;
				border-radius: 16rpx;
				background-image: url(../../static/img/caipusousuo_slices/mengbanzu%202.png);
				background-repeat: no-repeat;
				background-position: 20rpx 15rpx;
				text-align: center;
				font-size: 28rpx;
				margin-bottom: 20rpx;
			}

			.clear-input {
				position: absolute;
				top: 55rpx;
				right: 158rpx;
				font-size: 34rpx;
				z-index: 10;
				color: #333;
			}

			text {
				font-size: 32rpx;
				color: #fff;
				background-color: transparent;
				height: 60rpx;
				line-height: 60rpx;
				padding: 0 20rpx;
				margin-bottom: 20rpx;
				border: none;
			}
		}

	}

	.search-content {
		color: #ee7b2d;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		border-bottom: 1rpx solid #ee7b2d;
		margin: 0 30rpx;
	}

	.search-item {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		margin-left: 30rpx;
		display: flex;
		border-bottom: 2rpx solid #ccc;
	}

	.history {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		line-height: 50rpx;
		margin: 20rpx 0;
		padding: 0 30rpx;

		.title {
			width: 100%;
			height: 50rpx;
			font-size: 28rpx;
			margin-bottom: 20rpx;
		}

		.history-item {
			height: 50rpx;
			font-size: 26rpx;
			background-color: #ededed;
			margin-right: 20rpx;
			padding: 0 30rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
		}

		.icon-delete {
			position: absolute;
			bottom: 10rpx;
			right: 30rpx;
			width: 40rpx;
			height: 40rpx;
			margin-left: 20rpx;
		}
	}







	.vip-section {

		display: flex;
		flex-direction: column;

		width: 100vw;

		.section-title {

			display: flex;
			align-items: center;
			box-sizing: border-box;
			width: 100%;
			padding: 16rpx 30rpx;
			font-size: 30rpx;
			color: #8c8c8c;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-left: 10rpx;
			}
		}
	}

	// .menu-scroll {
	// 	.wt-item {
	// 		background-color: #f9f9f9;
	// 	}
	// }
</style>
